<template>
    <div>
        <div style="padding-bottom:10px">
            <el-button type="primary" @click="insertEvent(-1)">插入一行</el-button>
            <el-button type="primary" @click="removeCheckboxRow">删除选中</el-button>
        </div>

        <el-table ref="myTable" border :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="区块所属" align="center">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.firstValue" @change="oneSelectChange(scope, $event)" placeholder="请选择">
                        <el-option
                                v-for="item in optionsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" label="一级区块">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.secondValue" @change="twoSelectChange(scope, $event)" placeholder="请选择">
                        <el-option
                                v-for="item in scope.row.optionsOneList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" label="二级区块">
                <!-- optionsTwoList -->
                <template slot-scope="scope">
                    <el-select v-model="scope.row.VFPBlock" @change="threeSelectChange(scope, $event)" placeholder="请选择">
                        <el-option
                                v-for="item in scope.row.optionsTwoList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" label="计划量">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.changeQuantity" :disabled="true" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" label="计划开始时间">
                <template slot-scope="scope">
                    <el-date-picker
                            v-model="scope.row.plannedStartTime"
                            readonly
                            type="date">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column align="center" label="计划结束时间">
                <template slot-scope="scope">
                    <el-date-picker
                            v-model="scope.row.plannedEndTime"
                            readonly
                            type="date">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column align="center" label="变更开始时间">
                <template slot-scope="scope">
                    <el-date-picker
                            v-model="scope.row.changeStartTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            @change="dateChangeEvent($event, scope.row)"
                            placeholder="选择日期">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column align="center" label="变更结束时间">
                <template slot-scope="scope">
                    <el-date-picker
                            v-model="scope.row.changeEndTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            @change="dateChangeEvent($event, scope.row)"
                            placeholder="选择日期">
                    </el-date-picker>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import MapAttr from "../components/mapAttr.vue"
    import {sendThis,GetDataTableOfTBChoice,GetCommPopData} from '@/api/MapExt.js';
    export default {
        name: "dtl",
        data() {
            return {
                tableData: [],
                optionsList: [
                    {
                        "amount":45000.0,
                        "children":[
                            {
                                "amount":20126.0,
                                "children":[
                                    {
                                        "amount":914.0,
                                        "children":[],
                                        "label":"B区地下",
                                        "planEnd":"2020-05-04 00:00:00",
                                        "planStart":"2020-04-20 00:00:00",
                                        "value":1395
                                    },
                                    {
                                        "amount":1505.0,
                                        "children":[],
                                        "label":"B区夹层",
                                        "planEnd":"2020-06-11 00:00:00",
                                        "planStart":"2020-04-01 00:00:00",
                                        "value":1399
                                    },
                                ],
                                "label":"B展厅",
                                "planEnd":"2020-07-27 00:00:00",
                                "planStart":"2020-04-01 00:00:00",
                                "value":1391
                            },
                            {
                                "amount":24161.0,
                                "children":[
                                    {
                                        "amount":788.0,
                                        "children":[],
                                        "label":"A1地下结构",
                                        "planEnd":"2020-04-15 00:00:00",
                                        "planStart":"2020-04-04 00:00:00",
                                        "value":1431
                                    },
                                    {
                                        "amount":782.0,
                                        "children":[],
                                        "label":"A2地下结构",
                                        "planEnd":"2020-04-15 00:00:00",
                                        "planStart":"2020-04-04 00:00:00",
                                        "value":1435
                                    },
                                ],
                                "label":"A展厅",
                                "planEnd":"2020-07-30 00:00:00",
                                "planStart":"2020-04-04 00:00:00",
                                "value":1427
                            },
                            {
                                "amount":671.0,
                                "children":[
                                    {
                                        "amount":671.0,
                                        "children":[],
                                        "label":"登陆厅地下结构",
                                        "planEnd":"2020-04-15 00:00:00",
                                        "planStart":"2020-04-05 00:00:00",
                                        "value":1463
                                    }
                                ],
                                "label":"登陆厅",
                                "planEnd":"2020-04-15 00:00:00",
                                "planStart":"2020-04-05 00:00:00",
                                "value":1459
                            }
                        ],
                        "label":"详图设计",
                        "planEnd":"2020-07-30 00:00:00",
                        "planStart":"2020-04-01 00:00:00",
                        "value":42
                    },
                    {
                        "amount":45000.0,
                        "children":[
                            {
                                "amount":20126.0,
                                "children":[
                                    {
                                        "amount":914.0,
                                        "children":[],
                                        "label":"B区地下",
                                        "planEnd":"2020-06-21 00:00:00",
                                        "planStart":"2020-05-11 00:00:00",
                                        "value":1396
                                    },
                                    {
                                        "amount":1505.0,
                                        "children":[],
                                        "label":"B区夹层",
                                        "planEnd":"2020-08-07 00:00:00",
                                        "planStart":"2020-06-18 00:00:00",
                                        "value":1400
                                    }
                                ],
                                "label":"B展厅",
                                "planEnd":"2020-09-23 00:00:00",
                                "planStart":"2020-05-11 00:00:00",
                                "value":1392
                            },
                            {
                                "amount":24161.0,
                                "children":[
                                    {
                                        "amount":788.0,
                                        "children":[],
                                        "label":"A1地下结构",
                                        "planEnd":"2020-05-24 00:00:00",
                                        "planStart":"2020-04-16 00:00:00",
                                        "value":1432
                                    },
                                    {
                                        "amount":782.0,
                                        "children":[],
                                        "label":"A2地下结构",
                                        "planEnd":"2020-05-22 00:00:00",
                                        "planStart":"2020-04-16 00:00:00",
                                        "value":1436
                                    }
                                ],
                                "label":"A展厅",
                                "planEnd":"2020-08-10 00:00:00",
                                "planStart":"2020-04-16 00:00:00",
                                "value":1428
                            },
                            {
                                "amount":671.0,
                                "children":[
                                    {
                                        "amount":671.0,
                                        "children":[],
                                        "label":"登陆厅地下结构",
                                        "planEnd":"2020-05-20 00:00:00",
                                        "planStart":"2020-04-16 00:00:00",
                                        "value":1464
                                    }
                                ],
                                "label":"登陆厅",
                                "planEnd":"2020-05-20 00:00:00",
                                "planStart":"2020-04-16 00:00:00",
                                "value":1460
                            }
                        ],
                        "label":"物资管理",
                        "planEnd":"2020-09-23 00:00:00",
                        "planStart":"2020-04-16 00:00:00",
                        "value":43
                    }],
                optionsOneList: [],
                optionsTwoList: [],
                optionsTherrList: {},
                multipleSelection: [],
            };
        },

        methods: {
            // 区块触发
            oneSelectChange(e,data){
                if (data) {
                    let item = this.optionsList.find(item => item.value == data)
                    if (item) {
                        this.tableData[e.$index].optionsOneList = item.children
                        this.tableData[e.$index].secondValue =''
                    }
                }
            },
            // 一级触发
            twoSelectChange(e,data){
                if (data) {
                    let item = this.tableData[e.$index].optionsOneList.find(item => item.value == data)
                    if (item) {
                        this.tableData[e.$index].optionsTwoList = item.children
                        this.tableData[e.$index].VFPBlock =''
                    }
                }
            },
            // 二级触发
            threeSelectChange(e,data){
                if (data) {
                    let item = this.tableData[e.$index].optionsTwoList.find(item => item.value == data)
                    if (item) {
                        this.tableData[e.$index].optionsTherrList = item
                        this.tableData[e.$index].plannedStartTime = item.planStart
                        this.tableData[e.$index].plannedEndTime = item.planEnd
                        this.tableData[e.$index].changeStartTime = item.planStart
                        this.tableData[e.$index].changeEndTime = item.planEnd
                        this.tableData[e.$index].changeQuantity = item.amount
                    }
                }
            },
            // 删除复选框选中的数据
            removeCheckboxRow(){
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    for (var j = 0; j < this.tableData.length; j++) {
                        if(this.multipleSelection[i].index == this.tableData[j].index) {
                            this.tableData.splice(j, 1)
                        }
                    }
                }
            },
            // 复选框选中数据
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            // 插入一行时调用
            insertEvent (data ={}, i='') {
                let record = {
                    index: data.coId || new Date().getTime(),
                    firstValue: data.firstValue || '',
                    secondValue: data.secondValue || '',
                    VFPBlock: data.thirdValue || '',
                    changeQuantity: data.afterAmount || '',
                    plannedStartTime: data.beforeStart || '',
                    changeStartTime: data.afterStart || '',
                    plannedEndTime: data.beforeEnd || '',
                    changeEndTime: data.afterEnd || ''
                }
                this.tableData.push(record)
                if(this.isEdit) {
                    this.selectChange(data, i)
                }
            },
            // 但有数据时回赋值
            selectChange(data, i){
                if (data.firstValue) {
                    let item = this.optionsList.find(item => item.value == data.firstValue)
                    if (item) {
                        this.tableData[i].optionsOneList = item.children
                        if (data.secondValue) {
                            let items = item.children.find(items => items.value == data.secondValue)
                            if (items) {
                                this.tableData[i].optionsTwoList = items.children
                                if (data.thirdValue) {
                                    let itemss = items.children.find(itemss => itemss.value == data.thirdValue)
                                    if (itemss) {
                                        this.tableData[i].optionsTherrList = itemss
                                        this.tableData[i].plannedStartTime = itemss.planStart
                                        this.tableData[i].plannedEndTime = itemss.planEnd
                                        this.tableData[i].changeQuantity = itemss.amount
                                    }
                                }
                            }
                        }
                    }
                }
            },
            // 判断时间是否符合
            dateChangeEvent(e, data){
                let startdate = data.changeStartTime;
                let enddate = data.changeEndTime;
                let start = new Date(Date.parse(startdate.replace(/-/g, "/")));
                let end = new Date(Date.parse(enddate.replace(/-/g, "/")));
                if (start > end) {
                    this.$message({ message: '变更结束时间不能在变更开始时间之前',type: 'warning'});
                }
            },
        },
    }
</script>

<style scoped>

</style>